<!-- 货运需求管理 -->
{include file="common:header" /}
<link href="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
{include file="common:side" /}
    <div id="page-wrapper">
      <!--*************************** content部分开始 ******************-->
      <div class="container-fluid m-stacking" id="m_main">
        <div class="row m-t-20 m-title">
          <div class="col-sm-12">
            <div class="white-box">
              <h2 class="box-title">货运需求列表</h2>
            </div>
          </div>
        </div>
        <div class="row m-t-20">
          <div class="col-sm-12">
            <div class="white-box">
              <form action="">
                <div class="row">
                  <div class="col-sm-3">
                    <div class="form-group">
                      <div class="input-group">
                        <input type="text" id="start_time" name="start_time" class="form-control input-group-input-date" placeholder="请输入开始时间...">
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text fa-blue"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <div class="input-group">
                        <input type="text" id="end_time" name="end_time" class="form-control input-group-input-date" placeholder="请输入结束时间...">
                        <span class="input-group-btn input-group-btn-date">
                          <i class="mdi mdi-calendar-text fa-blue"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <div class="input-group">
                        <span class="input-group-btn input-group-btn-search">
                          <i class="fa fa-search fa-blue"></i>
                        </span>
                        <input type="text" id="search_input" name="" class="form-control input-group-input-search" placeholder="手机号" v-model="phone">
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-3">
                    <div class="form-group">
                      <div class="di">
                        <button type="button" class="btn btn-block btn-outline btn-info" @click="pageTo(1)">搜索</button>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
              <div class="table-responsive">
                <table id="myTable" class="table table-striped color-table info-table">
                  <thead>
                    <tr>
                      <th>订单编号</th>
                      <th>下单时间</th>
                      <th>昵称</th>
                      <th>手机号</th>
                      <th>用箱时间</th>
                      <th>始发地</th>
                      <th>目的地</th>
                      <th>货箱尺寸</th>
                      <th>物品类型</th>
                      <th>状态</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item,index) in dataList">
                      <td>{{item.order_sn}}</td>
                      <td>{{item.create_time}}</td>
                      <td>{{item.nickname}}</td>
                      <td>{{item.phone}}</td>
                      <td>{{item.use_time}}</td>
                      <td>{{item.issue}}</td>
                      <td>{{item.destination}}</td>
                      <td>{{item.size}}</td>
                      <td>{{item.item_type}}</td>
                      <td>
                        <a class="info m-r-10" href="javascript:void(0)" @click="changeStatus(item.id,2)">解决</a>
                        <a class="info m-r-10" href="javascript:void(0)" @click="changeStatus(item.id,3)">撤销</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <pagination :tr-all="trAll" :page-cur="pageCur" :page-all="pageAll" :page-size="pageSize" @page-to="pageTo" ref="c1"></pagination>
              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->
      </div>
      <!--*************************** content部分结束 ******************-->

      <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
    </div>
  </div>
  {include file="common:js" /}
  <script type="text/javascript" src="/web/js/search_list.js"></script>
  <script type="text/javascript" src="/web/js/common.js"></script>
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
  <script src="/web/js/datetimepicker.js"></script>
  {include file="common:footer" /}
  {include file="component:pagination" /}
  {include file="component:confirm" /}

  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          apiUrl: "",
          searchUrl: "/dashboard/index/freight_order_task", //搜索接口
          start_date: '',//搜索评审状态
          end_date: '',//搜索关键字，销售订单号
          phone: undefined,
          draw: '', //校验字段
          dataList: [1], //搜索列表数据
          trAll: 0, //数据总数
          pageAll: 0, //页码总数
          pageCur: 1, //当前页
          pageSize: 10, //每页数量
        }
      },
      mounted() {
        $('#start_time').datetimepicker({
          format: 'yyyy-mm-dd hh:ii:ss',
          weekStart: 1,
          language: 'zh-CN',
        });
        $('#end_time').datetimepicker({
          format: 'yyyy-mm-dd hh:ii:ss',
          weekStart: 1,
          language: 'zh-CN',
        });
        this.pageTo(1);
      },
      methods: {
        // 搜索当前页并渲染列表
        pageTo(page) {
          var that = this;
          that.start_date = $("input[name='start_time']").val();
          that.end_date = $("input[name='end_time']").val();
          var filter_param = {
            start_time: that.start_date,
            end_time: that.end_date,
            phone: that.phone,
          };
          searchList2(that,page,{filter_param: filter_param},(res)=>{

          },(fail)=>{

          },(error)=>{
          })
        },
        changeStatus: function(e, f) {
          axios.post('/dashboard/index/change_status', {id: e, status: f},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.ErrorCode == 1){
              //请求成功
              alert(res.data.ErrorMsg);
              this.pageTo(this.pageCur)
            }else{
              alert(res.data.ErrorMsg)
            }
          }).catch(err => {
            console.log(err);
          })
        }
      }
    })
  </script>
